<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        accent: '#0ea5e9',
                        neutral: '#f8fafc',
                        'neutral-dark': '#1e293b',
                        success: '#10b981',
                        danger: '#ef4444',
                        gold: '#fde68a',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system.html-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elegant': '0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1)',
                        'card': '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
                        'input': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
                        'button': '0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.15)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:shadow-lg;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
            .gradient-bg {
                @apply bg-gradient-to-br from-primary/5 to-accent/5;
            }
            .input-with-icon {
                @apply w-full pl-12 pr-4 py-3 rounded-xl border border-gray-200 form-input-focus transition-all duration-200 shadow-input;
            }
            .card-animation {
                @apply transition-all duration-500 hover:shadow-elegant;
            }
            .float-animation {
                animation: float 6s ease-in-out infinite;
            }
            .shine-animation {
                animation: shine 4s ease-in-out infinite;
            }
            .scale-animation {
                @apply transition-transform duration-300 hover:scale-105;
            }
            @keyframes float {
                0% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(-10px);
                }
                100% {
                    transform: translateY(0px);
                }
            }
            @keyframes shine {
                0% {
                    opacity: 0.3;
                    transform: scale(0.95);
                }
                50% {
                    opacity: 0.8;
                    transform: scale(0.95);
                }
                100% {
                    opacity: 0.3;
                    transform: scale(0.95);
                }
            }
            /* 侧边栏样式 */
           .sidebar {
                @apply fixed top-0 left-0 bottom-0 w-64 bg-white shadow-lg z-30 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out;
            }
           .sidebar.open {
                @apply translate-x-0;
            }
           .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg text-neutral-dark hover:bg-primary/10 hover:text-primary transition-all duration-200 cursor-pointer;
            }
           .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
           .sidebar-submenu {
                @apply pl-10 py-1 hidden;
            }
           .sidebar-submenu.open {
                @apply block;
            }
           .sidebar-subitem {
                @apply flex items-center gap-2 px-4 py-2 rounded-lg text-neutral-dark hover:bg-primary/10 hover:text-primary transition-all duration-200 cursor-pointer text-sm;
            }
           .sidebar-subitem.active {
                @apply bg-primary/10 text-primary font-medium;
            }

            /* 主内容样式 */
           .main-content {
                @apply ml-0 lg:ml-64 transition-all duration-300 min-h-screen;
            }
           .page-content {
                @apply p-4 md:p-6 lg:p-8;
            }

            /* 表格样式 */
           .data-table {
                @apply w-full border-collapse;
            }
           .data-table th {
                @apply px-4 py-3 text-left text-sm font-medium text-secondary border-b border-gray-200;
            }
           .data-table td {
                @apply px-4 py-3 text-sm text-neutral-dark border-b border-gray-100;
            }
           .data-table tr:hover {
                @apply bg-gray-50;
            }

            /* 按钮样式 */
           .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 btn-hover;
            }
           .btn-primary {
                @apply bg-primary text-white shadow-button;
            }
           .btn-secondary {
                @apply bg-gray-200 text-neutral-dark;
            }
           .btn-success {
                @apply bg-success text-white;
            }
           .btn-danger {
                @apply bg-danger text-white;
            }

            /* 顶部导航栏 */
           .top-nav {
                @apply bg-white shadow-sm fixed top-0 right-0 left-0 lg:left-64 z-20 transition-all duration-300;
            }
           .content-wrapper {
                @apply pt-16 pb-20;
            }

            /* 美化添加的样式 */
           .nav-item {
                @apply relative p-2 rounded-full hover:bg-gray-100 transition-colors duration-200;
            }
           .badge {
                @apply absolute -top-1 -right-1 w-4 h-4 flex items-center justify-center rounded-full text-xs font-bold;
            }
           .search-container {
                @apply relative max-w-md w-full;
            }
           .search-input {
                @apply w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
        }
    </style>
</head>

<body class="font-inter bg-gray-50">
    <!-- 侧边栏导航 -->
    <div class="sidebar" id="sidebar">
        <div class="p-4 border-b border-gray-100">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-primary">班级信息管理系统</h2>
                <button class="lg:hidden text-neutral-dark" id="closeSidebar">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>

        <div class="p-4">
            <ul class="space-y-1">
                <li class="sidebar-item" data-target="user-management">
                    <div class="flex items-center gap-3 w-full cursor-pointer" id="userManagementToggle">
                        <i class="fa fa-users w-5 text-center"></i>
                        <span>用户管理</span>
                        <i class="fa fa-chevron-down ml-auto text-xs transition-transform duration-200" id="userMenuIcon"></i>
                    </div>
                </li>

                <div class="sidebar-submenu" id="userSubmenu">
                    <li class="sidebar-subitem" data-target="student-management">
                        <a href="{{ url_for('admin.manage_student') }}" class="flex items-center gap-2 w-full">
                            <i class="fa fa-user-graduate"></i>
                            <span>学生管理</span>
                        </a>
                    </li>
                    <li class="sidebar-subitem" data-target="teacher-management">
                        <a href="{{ url_for('admin.teacher_admin') }}" class="flex items-center gap-2 w-full">
                            <i class="fa fa-chalkboard-teacher"></i>
                            <span>教师管理</span>
                        </a>
                    </li>
                </div>




                         <!-- ✅ 新增班级管理菜单（无子菜单） -->
            <li class="sidebar-item" data-target="class-management">
                <a href="{{ url_for('admin.class_manage') }}" class="flex items-center gap-3 w-full">
                    <i class="fa fa-graduation-cap w-5 text-center"></i> <!-- 班级图标 -->
                    <span>班级管理</span>
                </a>
            </li>





                <li class="sidebar-item" data-target="course-management">
                    <a href="{{ url_for('admin.course') }}" class="flex items-center gap-3 w-full">
                        <i class="fa fa-book w-5 text-center"></i>
                        <span>课程管理</span>
                    </a>
                </li>

                <li class="sidebar-item" data-target="settings">
                    <a href="{{url_for('admin.get_system')  }}" class="flex items-center gap-3 w-full">
                        <i class="fa fa-cog w-5 text-center"></i>
                        <span>系统设置</span>
                    </a>
                </li>
            </ul>
        </div>






        <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-100">
            <div class="flex items-center gap-3">
                <img src="https://picsum.photos/id/1005/200/200" alt="管理员头像" class="w-10 h-10 rounded-full object-cover">
                <div>
                    <p class="text-sm font-medium">{{ session.username }}</p>
                    <p class="text-xs text-secondary">admin@example.com</p>
                </div>
                <button id="logout" class="ml-auto text-neutral-dark hover:text-danger transition-colors">
                    <i class="fa fa-sign-out-alt"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 顶部导航栏 -->
  <div class="top-nav h-16">
  <div class="flex items-center justify-between h-full px-4 lg:px-6">
    <div class="flex items-center gap-4"> <!-- 可调整gap值 -->
      <button class="lg:hidden text-neutral-dark" id="openSidebar">
        <i class="fa fa-bars text-xl"></i>
      </button>
      <!-- 搜索框已删除 -->
    </div>

    <div class="flex items-center gap-4">
      <button class="nav-item relative">
        <i class="fa fa-bell text-xl"></i>
        <span class="badge bg-danger text-white">3</span>
      </button>

      <button class="nav-item relative">
        <i class="fa fa-envelope text-xl"></i>
        <span class="badge bg-primary text-white">5</span>
      </button>

      <div class="h-8 border-r border-gray-200 hidden md:block"></div>

      <div class="flex items-center gap-3">
        <img src="https://picsum.photos/id/1005/200/200" alt="管理员头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
        <div class="hidden md:block">
          <p class="text-sm font-medium">{{ session.username }}</p>
          <p class="text-xs text-secondary">admin@example.com</p>
        </div>
      </div>
    </div>
  </div>
</div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="content-wrapper">
            {% block content %}{% endblock %}
        </div>
    </div>

    <script>




        // 侧边栏菜单切换
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const openSidebarBtn = document.getElementById('openSidebar');
            const closeSidebarBtn = document.getElementById('closeSidebar');
            const userManagementToggle = document.getElementById('userManagementToggle');
            const userSubmenu = document.getElementById('userSubmenu');
            const userMenuIcon = document.getElementById('userMenuIcon');
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            const sidebarSubitems = document.querySelectorAll('.sidebar-subitem');
            const logoutBtn = document.getElementById('logout');
            if (logoutBtn) {
             logoutBtn.addEventListener('click', handleLogout);
            }
            // 移动端侧边栏控制
            openSidebarBtn.addEventListener('click', function() {
                sidebar.classList.add('open');
            });

            closeSidebarBtn.addEventListener('click', function() {
                sidebar.classList.remove('open');
            });

            // 用户管理子菜单切换
            userManagementToggle.addEventListener('click', function(e) {
                e.preventDefault();
                userSubmenu.classList.toggle('open');
                userMenuIcon.classList.toggle('rotate-180');

                // 关闭其他子菜单
                document.querySelectorAll('.sidebar-submenu').forEach(submenu => {
                    if (submenu.id !== 'userSubmenu') {
                        submenu.classList.remove('open');
                        const icon = submenu.previousElementSibling.querySelector('i.fa-chevron-down');
                        if (icon) icon.classList.remove('rotate-180');
                    }
                });
            });





            function handleLogout() {
    // 确认退出（可选）
    if (!confirm('确认退出当前账号？')) {
        return;
    }

    // 发送退出登录请求（后端接口）
    fetch('/admin/logout', { method: 'POST' })
        .then(response => {
            if (response.ok) {
                // 清除本地存储的Token（如果有）
                localStorage.removeItem('auth_token');

                // 跳转至登录页面
                window.location.href = '/login'; // 替换为实际登录页路径

                showToast('退出登录成功', 'success');
            } else {
                throw new Error('退出失败');
            }
        })
        .catch(error => {
            showToast('退出登录失败，请重试', 'error');
            console.error('退出登录错误:', error);
        });
}
            // 高亮当前页面菜单项
            function highlightCurrentPage() {
                const currentPath = window.location.pathname;
                const currentPage = currentPath.substring(currentPath.lastIndexOf('/') + 1);

                // 移除所有活动状态
                sidebarItems.forEach(item => item.classList.remove('active'));
                sidebarSubitems.forEach(item => item.classList.remove('active'));

   if (currentPath.includes('manage_class')) {
            document.querySelector('[data-target="class-management"]').classList.add('active');
        }


                // 设置活动状态
                if (currentPage === 'student-management.html') {
                    document.querySelector('.sidebar-subitem[data-target="student-management"]').classList.add('active');
                    userManagementToggle.parentElement.classList.add('active');
                    userSubmenu.classList.add('open');
                    userMenuIcon.classList.add('rotate-180');
                } else if (currentPage === 'teacher-management.html') {
                    document.querySelector('.sidebar-subitem[data-target="teacher-management"]').classList.add('active');
                    userManagementToggle.parentElement.classList.add('active');
                    userSubmenu.classList.add('open');
                    userMenuIcon.classList.add('rotate-180');
                } else if (currentPage === 'course-management.html') {
                    document.querySelector('.sidebar-item[data-target="course-management"]').classList.add('active');
                } else if (currentPage === 'settings.html') {
                    document.querySelector('.sidebar-item[data-target="settings"]').classList.add('active');
                }
            }

            // 初始化高亮当前页面
            highlightCurrentPage();
        });
    </script>
</body>

</html>